<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

            <% for(var i=0; i<models.length; i++) { %>
              <div class="model" data-show="true">

                <div class="model-section model-ids">
                  <a href="<%= rootPath %>/models/<%= models[i].id %>">
                    <div class="kv nkv"
                      data-key="Model ID"
                      data-val="<%= models[i].id %>"
                    >
                      Model ID: <%= models[i].id %>
                    </div>
                  </a>

                  <div class="kv"
                    data-key="Experiment Run ID"
                    data-val="<%= models[i].experimentRunId %>"
                  >
                    Experiment Run ID: <%= models[i].experimentRunId %>
                  </div>

                  <div class="kv"
                    data-key="Experiment ID"
                    data-val="<%= models[i].experimentId %>"
                  >
                    Experiment ID: <%= models[i].experimentId %>
                  </div>

                  <div class="kv"
                    data-key="Project ID"
                    data-val="<%= models[i].projectId %>"
                  >
                    Project ID: <%= models[i].projectId %>
                  </div>
                </div>


                <div class="model-section model-dataframe">

                  <% if (models[i].trainingDataFrame.tag) { %>
                    <div class="kv"
                      data-key="DF Tag"
                      data-val="<%= models[i].trainingDataFrame.tag %>"
                    >
                      DF Tag: <%= models[i].trainingDataFrame.tag %>
                    </div>
                  <% } %>

                  <% if (models[i].trainingDataFrame.filepath) { %>
                    <div class="nkv"
                      data-key="DF Filepath"
                      data-val="<%= models[i].trainingDataFrame.filepath %>"
                    >
                      DF Filepath: <%= models[i].trainingDataFrame.filepath %>
                    </div>
                  <% } %>

                  <% if (models[i].trainingDataFrame.metadata.length > 0) { %>
                    <div class="nkv dfmetadata-container popup-container">
                      <div class="popup-label">Metadata</div>
                      <div class="dfmetadata popup-contents">
                        <% for (var j=0; j<models[i].trainingDataFrame.metadata.length; j++) { %>
                          <div class="kv"
                            data-src="metadata"
                            data-key="<%= models[i].trainingDataFrame.metadata[j].key %>"
                            data-val="<%= models[i].trainingDataFrame.metadata[j].value %>"
                          >
                            <%= models[i].trainingDataFrame.metadata[j].key %>: <%= models[i].trainingDataFrame.metadata[j].value %>
                          </div>
                        <% } %>
                      </div>
                    </div>
                  <% } %>
                </div>


                <div class="model-section model-spec">

                  <div class="kv"
                    data-key="Type"
                    data-val="<%= models[i].specification.transformerType %>"
                  >
                    Type: <%= models[i].specification.transformerType %>
                  </div>

                  <% if (models[i].specification.tag) { %>
                    <div class="kv"
                      data-key="Spec Tag"
                      data-val="<%= models[i].specification.tag %>"
                    >
                      Spec Tag: <%= models[i].specification.tag %>
                    </div>
                  <% } %>

                  <% if (models[i].specification.hyperparameters.length > 0) { %>
                    <div class="nkv hyperparams-container popup-container">
                      <div class="popup-label">Hyperparameters</div>
                      <div class="hyperparams popup-contents">
                        <% for (var j=0; j<models[i].specification.hyperparameters.length; j++) { %>
                          <div class="kv"
                            data-src="hyperparameters"
                            data-key="<%= models[i].specification.hyperparameters[j].name %>"
                            data-val="<%= models[i].specification.hyperparameters[j].value %>"
                          >
                            <%= models[i].specification.hyperparameters[j].name %>: <%= models[i].specification.hyperparameters[j].value %>
                          </div>
                        <% } %>
                      </div>
                    </div>
                  <% } %>
                </div>


                <div class="model-section model-metrics">
                  <% for (var j=0; j<models[i].metrics.length; j++) { %>
                    <div class="model-metric kv"
                      data-key="<%=models[i].metrics[j].key %>"
                      data-val="<%=models[i].metrics[j].val %>"
                      data-num="true"
                    >
                      <%= models[i].metrics[j].key %>: <%= models[i].metrics[j].val %>
                    </div>
                  <% } %>
                </div>


                <div class="model-section model-misc">
                  <% if (models[i].sha) { %>
                    <div class="nkv"
                      data-key="Code SHA"
                      data-val="<%= models[i].sha %>"
                    >
                      Code SHA: <%= models[i].sha %>
                    </div>
                  <% } %>

                  <% if (models[i].filepath) { %>
                    <div class="nkv"
                      data-key="Filepath"
                      data-val="<%= models[i].filepath %>"
                    >
                      Filepath: <%= models[i].filepath %>
                    </div>
                  <% } %>
                </div>

              </div>
            <% } %>


  </body>
</html>
